<template>
	<div class="flow-container">
		<div class="topnum">
			<img :src="this.imgurl" alt="">
		</div>
		<div class="flowcontent">
			<div class="flowicon">
				<!-- <img :src="this.iconurl" alt=""> -->
				<img :src="itemMes.image" alt="">
			</div>
			<div class="flowtext">
				<p>{{itemMes.title}}</p>
				<div>{{itemMes.content}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			iconnum: {
				type: Number,
				default: 1
			},
			flowObj: {
				type: Object,
				default: {
					title: "确定出版方案",
					content: '与您商定该书出版的具体方案签订委托出版合同',
					image: ''
				}
			}
		},
		data() {
			return {
				num: this.iconnum,
				itemMes: this.flowObj
			}
		},
		mounted() {
			// console.log(this.itemMes);
		},
		computed: {
			imgurl() {
				return require('@/assets/index/flow/0' + this.num + '.png')
			},
			iconurl() {
				return require('@/assets/index/flow/0' + this.num + 'icon.png')
			}
		},
		watch: {
			flowObj(newVal, oldVal) {
				this.itemMes = newVal;
			}
		}

	}
</script>

<style scoped>
	.flow-container {
		width: 220px;
		height: 380px;
		background-color: white;
		border: 1px solid rgb(36, 121, 125);
		box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.09);
		
		border-radius: 10px;
	}

	.topnum {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.topnum img {
		width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-top: 20px;
	}

	.flowicon {
		padding-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.flowicon img {
		width: 80px;
		height: 85px;
	}

	.flowtext {
		margin: 35px 30px 0px 30px;

	}

	.flowtext p {
		color: rgb(255, 255, 255);
		font-family: PingFang SC;
		font-size: 22px;
		/* line-height: 35px; */
		letter-spacing: 0px;
		text-align: center;
		margin: 0;
		background-color: #DFA66A;
		background-color: #DFA66A;
		/* height: 35px; */
	}

	.flowtext div {
		/* display: inline-block; */
		padding-top: 20px;
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 18px;
		/* line-height: 27px; */
		letter-spacing: 0px;
		text-align: center;
	}
</style>
